<template>
  <view class="classList">
    <!-- 加载动画 -->
    <view class="loadingLayout" v-if="!dataList.length && !noData">
      <uni-load-more status="loading"></uni-load-more>
    </view>

    <!-- 内容 -->
    <view class="content">
      <navigator
        :url="`/pages/preview/preview?id=${item._id}`"
        class="item"
        v-for="(item, index) in dataList"
        :key="item._id"
      >
        <image :src="item.smallPicurl" mode="aspectFill" />
      </navigator>
    </view>

    <!-- 加载动画 -->
    <view class="loadingLayout" v-if="dataList.length > 0 || noData == true">
      <uni-load-more :status="noData ? 'noMore' : 'loading'"></uni-load-more>
    </view>

    <view class="safe-area-inset-bottom"></view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import {
  onLoad,
  onReachBottom,
  onPullDownRefresh,
  onShareAppMessage,
} from "@dcloudio/uni-app";
import { apiGetClassList, apiDownOrScore } from "../../api/apis";
import { goHome } from "../../utils/time";
import { mitter } from "../../utils/bus";
const dataList = ref([]);
const noData = ref(false);
const pageName = ref("");

const queryParams = {
  pageNum: 1,
  pageSize: 12,
};
// 获取分类Id
onLoad((e) => {
  let { id, name, type = null } = e;
  if (type) queryParams.type = type;
  if (id) queryParams.classid = id;
  // if (!id) {
  //   goHome();
  // }
  pageName.value = name;
  uni.setNavigationBarTitle({ title: name });

  getDataList();

  // mitter.on("get-wallpaper", () => {
  //   if (noData.value) return;
  //   queryParams.pageNum++;
  //   getDataList();
  // });
});
// 触底加载
onReachBottom(() => {
  // 判断是否还有数据
  if (noData.value) return;
  queryParams.pageNum++;
  getDataList();
});
// 下拉刷新
onPullDownRefresh(() => {
  queryParams.pageNum = 1;
  getDataList();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 1000);
});

// 获取分类列表
const getDataList = async () => {
  let res;
  if (queryParams.classid) {
    res = await apiGetClassList(queryParams);
  }
  if (queryParams.type) {
    res = await apiDownOrScore(queryParams);
  }
  if (queryParams.pageNum === 1) {
    dataList.value = res.data;
  } else {
    dataList.value = [...dataList.value, ...res.data];
  }

  // 没有更多数据
  if (res.data.length < queryParams.pageSize) {
    noData.value = true;
  }
  // 缓存数据
  uni.setStorageSync("storeClassList", dataList.value);
};

// 分享
onShareAppMessage((e) => {
  return {
    title: `贝贝壁纸-${pageName.value}`,
    path: `/pages/classList/classList?id=${queryParams.classid}&name=${pageName.value}`,
  };
});
</script>

<style lang="scss" scoped>
.classList {
  .content {
    padding: 5rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rpx;

    .item {
      height: 440rpx;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
